<template>
  <role-list></role-list>
</template>

<script setup lang="ts">
import {
  getAllTree,
  getTreeDetail,
  updataRoleJurisdiction,
  Tree,
} from '@/api/user/userList'
import { CodeEnum } from '@/constants/http-code'
import { ElTree } from 'element-plus'
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'
import RoleList from './components/role-list.vue'

const updata = async () => {
  // 获取树结构数据
  const res = await getTreeDetail(1)
  console.log(res, 'res')

  //定义两个数组接收element组件的返回值
  const check = treeRef.value?.getCheckedKeys() as number[]
  const halfCheck = treeRef.value?.getHalfCheckedKeys() as number[]
  console.log(check, 'check')
  console.log(halfCheck, 'halfCheck')
  // 将所有数据变成concat(合在一起)然后进行filter(筛选)[返回不重复的数据]
  // 返回变化的数据
  const arr = res.data.concat([...check, ...halfCheck]).filter((v, i, arr) => {
    return arr.indexOf(v) === arr.lastIndexOf(v)
  })
  console.log(arr, 'arr')
  // 定义两个数组接收添加的和删除的
  const add: number[] = []
  const del: number[] = []
  // 对arr数组进行遍历找到添加的数据和删除的数据(indexOf返回-1说明原数组中没有该值,为添加)
  arr.forEach((v) => {
    if (res.data.indexOf(v) === -1) {
      add.push(v)
    } else {
      del.push(v)
    }
  })
  console.log(`添加: ${add}`)
  console.log(`删除: ${del}`)

  const res1 = await updataRoleJurisdiction({
    roleId: '1',
    add,
    del,
  })
  console.log(res1, 'res1')
  if (res1.code === CodeEnum.UPDATE) {
    initTreeData()
    console.log(99999999999)
  }
}

// 改变树结构中的默认配置
const defaultProps = {
  children: 'children',
  label: 'title',
}

// 定义树结构的数据类型
const treeData = ref<Tree[]>([])

// 获取树结构ref
const treeRef = ref<InstanceType<typeof ElTree>>()
// 初始化树结构
const initTreeData = async () => {
  const res = await getAllTree()
  const res1 = await getTreeDetail(1)
  treeData.value = res.data
  treeRef.value?.setCheckedKeys(res1.data)
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
initTreeData()
</script>
<style lang="scss" scoped></style>
